<template>
  <section class="tt-banner">
    <div>
      <!-- elementUI 轮播图 -->
      <el-carousel trigger="click" :interval="5000">
        <el-carousel-item v-for="item in $store.state.home.bannerList" :key="item.id">
          <a href="#/home/banner">
            <img :src="item.src" alt="" />
          </a>
        </el-carousel-item>
      </el-carousel>
    </div>
  </section>
</template>

<style lang="less">
// 轮播图组件
// swiper bootstrap elementUI
.tt-banner {
  width: 100%;
  background-color: yellowgreen;
  position: relative;
  > div {
    width: 100%;
    .el-carousel {
      width: 100%;
      .el-carousel__container {
          height: auto;
          min-height: 150px;
      }
      .el-carousel__indicator {
          -webkit-tap-highlight-color: transparent;
      }
    }
    a {
      display: block;
      min-height: 150px;
      -webkit-tap-highlight-color: transparent;
      img {
        width: 100%;
      }
    }
  }
}
</style>

<script>
// 按需导入
//   Carousel,
//   CarouselItem,
import Vue from "vue";
import { Button, Carousel, CarouselItem } from "element-ui";
Vue.use(Button);
Vue.use(Carousel);
Vue.use(CarouselItem);
export default {
  data() {
    return {
      bannerList: [
        // {
        //   id: "xxx01",
        //   src: "http://47.115.51.185//uploads/attach/2021/06/20210626/a924d092e4cd4ed15e58bd351e9632a4.jpg",
        // },
        // {
        //   id: "xxx02",
        //   src: "http://47.115.51.185//uploads/attach/2021/04/20210407/6048ac2e54b5b78b0a1283a35736b6b9.jpg",
        // },
        // {
        //   id: "xxx03",
        //   src: "http://47.115.51.185//uploads/attach/2021/06/20210626/964b2fce51fff7f43ef7128a8f4267bd.jpg",
        // },
      ],
    };
  },
};
</script>
